import React,{useState,useEffect} from 'react'

export default function chooseList(props:any) {
    const [dataList,setDataList] = useState([])
    const [chooseList,setChooseList]:any = useState([])
    const [buttonSize,setButtonSize] = useState('large')
    useEffect(()=>{
        setDataList(props.list)
    },[props.list])
    useEffect(()=>{
        if(props.chooseData && props.chooseData.length > 0){
            setChooseList(props.chooseData)
        }
    },[props.chooseData])
    function choose(el:any){
        let arr:any = [...chooseList]
        if(arr.includes(el.value)){
            arr = arr.filter((t:any)=>t !== el.value)
        } else {
            arr.push(el.value)
        }
        setChooseList(arr)
        props.chooseModel(arr)
    }
    useEffect(()=>{
        setButtonSize(props.size)
    },[props.size])
  return (
    <div>
        {dataList.map((el:any)=>{
            return (
            <span key={el.value} 
            className={chooseList.includes(el.value)?`tab_button active ${buttonSize}`:`tab_button ${buttonSize}`}
            onClick={()=>choose(el)}>{el.label}</span>)
        })
        }
    </div>
  )
}
